<template>
	<div>
		<Header></Header>
		<div class="m-content">
		
		  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
		    <el-form-item label="标题" prop="title">
		      <el-input v-model="ruleForm.title"></el-input>
		    </el-form-item>
		
		    <el-form-item label="摘要" prop="description">
		      <el-input type="textarea" v-model="ruleForm.description"></el-input>
		    </el-form-item>
		
		    <el-form-item label="内容" prop="content">
		      <mavon-editor v-model="ruleForm.content"></mavon-editor>
		    </el-form-item>
		
		    <el-form-item>
		      <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
		      <el-button @click="resetForm('ruleForm')">重置</el-button>
		    </el-form-item>
		  </el-form>
		
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	 import Header from "@/components/Header"
	 import Footer from "@/components/Footer"
	export default{
		name:'newsedit',
		 components:{Header,Footer},
		data() {
		  return {
		    ruleForm: {
		      id: '',
		      title: '',
		      description: '',
		      content: ''
		    },
		    rules: {
		      title: [
		        { required: true, message: '请输入标题', trigger: 'blur' },
		        { min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
		      ],
		      description: [
		        { required: true, message: '请输入摘要', trigger: 'blur' }
		      ],
		      content: [
		        { trequired: true, message: '请输入内容', trigger: 'blur' }
		      ]
		    }
		  };
		},
		methods: {
		  submitForm(formName) {
		    this.$refs[formName].validate((valid) => {
		      if (valid) {
		
		        const _this = this
		        this.$axios.post('/news/edit', this.ruleForm, {
		          headers: {
		            "Authorization": localStorage.getItem("token")
		          }
		        }).then(res => {
		          console.log(res)
		          _this.$alert('操作成功', '提示', {
		            confirmButtonText: '确定',
		            callback: action => {
		              _this.$router.push("/news")
		            }
		          });
		
		        })
		
		      } else {
		        console.log('error submit!!');
		        return false;
		      }
		    });
		  },
		  resetForm(formName) {
		    this.$refs[formName].resetFields();
		  }
		},
		created() {
		  const newsId = this.$route.params.newsId
		  console.log(newsId)
		  const _this = this
		  if(newsId) {
		    this.$axios.get('/news/' + newsId).then(res => {
		      const news = res.data.data
		      _this.ruleForm.id = news.id
		      _this.ruleForm.title = news.title
		      _this.ruleForm.description = news.description
		      _this.ruleForm.content = news.content
		    })
		  }
		
		}
	}
</script>

<style scoped>
  .m-content {
    text-align: center;
  }
</style>
